<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
            section {
                position: relative;
                display: inline-block;
                width: 300px;
                height: 100px;
                border: 1px solid red;
                overflow: hidden;
            }
            img {
                position: absolute;
                left: 0px;
                top: 50px;
                width: 280px;
                height: 80px;
            }
        </style>
    </head>
    <body>
        <section>
            <h2>ltr image, rtl alt</h2>
            <img dir="ltr" alt="یا" src="about:blank">
        </section>
        <section>
            <h2>rtl image, rtl alt</h2>
            <img dir="rtl" alt="یا" src="about:blank">
        </section>
        <section>
            <h2>ltr image, ltr alt</h2>
            <img dir="ltr" alt="alt" src="about:blank">
        </section>
        <section>
            <h2>rtl image, ltr alt</h2>
            <img dir="rtl" alt="alt" src="about:blank">
        </section>
        <section>
            <h2>ltr image, weak alt</h2>
            <img dir="ltr" alt=".," src="about:blank">
        </section>
        <section>
            <h2>rtl image, weak alt</h2>
            <img dir="rtl" alt=".," src="about:blank">
        </section>
        <section>
            <h2>ltr image, mixed alt</h2>
            <img dir="ltr" alt="یاexampleیا" src="about:blank">
        </section>
        <section>
            <h2>rtl image, mixed alt</h2>
            <img dir="rtl" alt="یاexampleیا" src="about:blank">
        </section>
        <p>
            Tests that image alt text takes directionality into account.
        </p>
    </body>
</html>
